<template>
  <div class="contaienr-item-audio-player">
    <!-- <div class="item-title">{{ audioList[nowPlayIndex].title }}</div> -->
    <!-- <i class="el-icon-video-play" /> -->
    <div class="item-player">
      <div class="item-title">{{ nowPlay.title }}</div>
    </div>
    <div v-for="(item_audio,item_index) in audioList" :key="item_index" class="item-audio-list" @click="switchAudio(item_audio)">
      <span class="item-audio-index">{{ item_index + 1 }}</span>
      <span class="item-audio-title">{{ item_audio.title }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      nowPlayIndex: 0,
      audio: null,
      nowPlay: {}
    };
  },
  computed: {
    audioList() {
      const arr = [];
      for (const audio of this.value) {
        arr.push({
          title: audio.title,
          url: audio.store_resource.url
        });
      }
      return arr;
    }
  },
  async mounted() {
    await this.generatePlayer(this.audioList[0].url);
  },
  methods: {
    async generatePlayer(url) {
      if (!url) {
        return;
      }
      const audio = new Audio(
        'https://miva-work-resource.oss-cn-beijing.aliyuncs.com/' + url
      );
      this.audio = audio;
    },
    async audioPlay(url) {
      this.generatePlayer();
    },
    async switchAudio(audio) {
      console.log(audio);
      this.nowPlay = audio;
      this.audio.src = 'https://miva-work-resource.oss-cn-beijing.aliyuncs.com/' + audio.url;
      // this.audio.onload(() => {
      this.audio.play();
      // });
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.contaienr-item-audio-player {
  .item-audio-list {
    padding: 10px 0;
    .item-audio-index {
      padding: 1px 3px;
      margin-right: 10px;
      border-radius: 3px;
      font-size: 12px;
      background-color: $menuActiveText;
      color: #fff;
    }
  }
}
</style>
